import React, { useState } from 'react';
import axios from "axios";
import 'antd/dist/antd.css';
import '../static/css/Login.css'
import { Card, Input, Button, Spin, message } from 'antd';
import { UserOutlined, KeyOutlined } from '@ant-design/icons';
import servicePath from '../config/apiUrl'
import { post } from '../config/http'


function Login(props) {
    const [userName, setUserName] = useState("treey");
    const [password, setPassword] = useState("treey123");
    const [isLoading, setIsLoading] = useState(false);

    const checkLogin = () => {
        setIsLoading(true)
        if (!userName) {
            message.error('用户名不能为空')
            setTimeout(() => {
                setIsLoading(false)
            }, 1000)
            return false
        } else if (!password) {
            message.error('密码不能为空')
            setTimeout(() => {
                setIsLoading(false)
            }, 1000)
            return false
        }
        let dataProps = {
            'userName': userName,
            'password': password
        }

        post(servicePath.checkLogin, dataProps).then((res) => {
            setIsLoading(false)
            if (res.code == '200') {
                localStorage.setItem('token', res.token)
                props.history.push('/index')
            } else {
                message.error('用户名密码错误')
            }
        })
    }

    return (
        <div className='login-div'>
            <Spin tip="登录中..." spinning={isLoading}>
                <Card title="用户登录" style={{ width: 300 }}>
                    <Input
                        size="large"
                        placeholder="请输入用户名"
                        prefix={<UserOutlined />}
                        className="input-box"
                        onChange={(e) => { setUserName(e.target.value) }} />
                    <Input.Password
                        size="large"
                        placeholder="请输入密码"
                        className="input-box"
                        prefix={<KeyOutlined />}
                        onChange={(e) => { setPassword(e.target.value) }} />
                    <Button type="primary" size="large" block onClick={checkLogin} className="loginBtn"> 登 录 </Button>
                </Card>
            </Spin>
        </div>
    )
}
export default Login